<template>
    <div id="menu">
        <div class="logo" >
            <h1>Logo</h1>
        </div>
        <a-menu
                theme="dark"
                mode="horizontal"
                v-model:selectedKeys="selectedKeys"
                :style="{ lineHeight: '64px' }"
                class="menuWrap"
        >
            <a-menu-item key="1">nav 1</a-menu-item>
            <a-menu-item key="2">nav 2</a-menu-item>
            <a-menu-item key="3">nav 3</a-menu-item>
        </a-menu>
        <div class="quit" @click="quit('/')">
            <LogoutOutlined /> 退出
        </div>
    </div>
</template>

<script lang="ts">
    import { LogoutOutlined } from "@ant-design/icons-vue";
	import { defineComponent, ref } from 'vue';
    import { useRouter } from "vue-router";
    import saveData from "@store/storage";
	export default defineComponent({
        components: {
            LogoutOutlined
        },
		setup() {
            const router = useRouter();
            const quit = (path: string)=>{
                localStorage.clear();
                saveData.storage.removeItem('');
                router.replace(path);
            }
			return {
				selectedKeys: ref(['2']),
				collapsed: ref(false),
                quit
			};
		},
    })
</script>

<style lang="scss">
    #menu{
        display: flex;
        flex-direction: row;
        .logo{
            width: 100px;
            h1{
                color:#fff;
            }
        }
        .menuWrap{
            flex-grow: 1;
        }
        .quit{
            width: 80px;
            text-align: center;
            color:#fff;
            cursor: pointer;
            transition: all ease-in-out .3s;
            &:hover{
                background: #042746;
            }
        }
    }
</style>
